<template>
  <div class="bigHigh_box">
    <p class="list_inp">
      <span>回款日期:</span> <el-input type="text" v-model="inp1" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span> 回款金额:</span> <el-input type="text" v-model="inp2" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span> 关联客户: </span> <el-input type="text" v-model="inp3" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span> 关联订单:</span> <el-input type="text" v-model="inp4" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span>回款期次:</span> <el-input type="text" v-model="inp5" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span>付款方式: </span> <el-input type="text" v-model="inp6" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span>回款类型:</span> <el-input type="text" v-model="inp7" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span> 收款人员:</span> <el-input type="text" v-model="inp8" class="inp"> </el-input>
    </p>
    <p class="list_inp">
      <span class="tagName"> 备注消息:</span><textarea style="width: 400px; height: 160px;"
        placeholder="请输入备注信息"> </textarea>
    </p>
    <p class="list_inp" id="tag">
      <span> 通知人员:</span>

      <!-- 标签选择 -->
    <div class="flex gap-2">
      <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
      <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
        @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">
        + New Tag
      </el-button>
    </div>
    </p>


    <p class="tagging">注：审批完成后，将自动通知到所选人员</p>






    <div class="mb-4">

      <el-button type="primary" class="btn">提交审核</el-button>
      <el-button type="primary" plain class="btn">重置</el-button>

    </div>





  </div>
</template>

<script lang="ts" setup>

//这里面的都是tag标签选择的时候用到的
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'






const inp1 = ref('')
const inp2 = ref('')
const inp3 = ref('')
const inp4 = ref('')
const inp5 = ref('')
const inp6 = ref('')
const inp7 = ref('')
const inp8 = ref('')

const inputValue = ref('')
const dynamicTags = ref(['赵小刚', '李小明', '王小红'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style scoped>
/* .tagName{
 
} */
.btn {
  width: 140px;
  height: 36px;
}

.mb-4 {
  margin: 0 auto;
  margin-top: 30px;
}

.tagging {
  text-align: center;
  color: rgb(153, 153, 153);
  margin-top: 15px;
  font-family: '微软雅黑', sans-serif;
}

.list_inp {
  text-align: center;
  margin-top: 20px;
}

.list_inp>span {
  font-family: '微软雅黑', sans-serif;
}

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.inp {
  width: 400px;
  height: 40px;
  margin-left: 40px;
}

.bigHigh_box {
  max-height: 450px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
</style>